<div class="panel-manage">
	<div class="navbar navbar-inverse">
		<div class="navbar-inner text-right">	    	
			<button id="btn-contact-add" class="btn btn-primary">เพิ่มที่อยู่</button>		
		</div>
	</div>
	<div class="panel-message"></div>
	<div class="alert alert-info" style="margin-top:10px;"><p><i class="icon-info-sign"></i>
		<small>ความกว้างและยาวที่เหมาะสมของ<b>รูปแผนที่</b> <?= $image_config['map_img_limit_width'] ?> x <?= $image_config['map_img_limit_height'] ?> และขนาดรูปภาพไม่เกิน 
			<?= ($image_config['map_img_limit_size'] / 1000); ?>kb สนับสนุนไฟล์รูปภาพนามสกุล 
			<?php print implode(',', array_unique(explode(',', strtolower(implode(',', array_unique($image_config['map_img_extensions'])))))); ?>
		</small></p>
	</div>
	<div>
		<table class="table table-striped table-hover">
			<tbody>
			<?php for ($i=0; $i<count($data); $i++): ?>
					<tr>
						<td>						
							<a class="thumbnail" href="#">
								<img style="width:150px; height:100px;" src="<?php print $data[$i]['CAF_P_L_MAP']; ?>" />
							</a>
						</td>
						<td>	
							<div class="text-right">
								<span class="icon-edit btn-hover btn-contact-edit tooltips" data-toggle="tooltip" title="แก้ไข">
									<input type="hidden" name="id" value="<?php print $data[$i]['CAF_P_L_ID']; ?>" />
								</span>
								<span class="icon-remove btn-hover btn-contact-remove-item tooltips" data-toggle="tooltip" title="ลบ">
									<input type="hidden" name="id" value="<?php print $data[$i]['CAF_P_L_ID']; ?>" />
								</span>								
							</div>
							<div>						
								<?php if (!empty($data[$i]['CAF_P_L_TITLE'])): ?>
									<h4>สาขา <?php print $data[$i]['CAF_P_L_TITLE']; ?></h4>								
								<?php endif; ?>
								<dl class="dl-horizontal">
									<dt>ที่ตั้งร้าน:</dt>
									<dd><?php print $data[$i]['CAF_P_L_ADDRESS'] . ' ' .
															$data[$i]['PROVINCE_NAME'] . ' ' .
															$data[$i]['CAF_P_L_POSTCODE']; ?>
									</dd>
									<dt>ติดต่อได้ที่</dt>
									<dd>									
										<?php if (!empty($data[$i]['CAF_P_L_PHONE'])) 
												print 'โทรศัพท์ ' . $data[$i]['CAF_P_L_PHONE'] . ' ';
											 if (!empty($data[$i]['CAF_P_L_FAX']))
												print 'แฟกซ์ ' . $data[$i]['CAF_P_L_FAX'] . ' '; 
											 if (!empty($data[$i]['CAF_P_L_EMAIL']))
												print 'อีเมล ' . $data[$i]['CAF_P_L_EMAIL']; ?>
									</dd>
								</dl>
							</div>							
						</td>																						
					</tr>				
			<?php endfor; ?>
			</tbody>
		</table>		
	</div>
</div>

<script type="text/javascript">
	function create_contact_modal(url_action, id){
		var html = '<div id="modal-contact" class="modal hide fade">';		
		html += '<div class="modal-header">';
		html += '	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
		html += '	<h3>เพิ่มที่อยู่</h3>';
		html += '</div>';
		html += '<div class="modal-body">';	
		html += '	<form id="frm-contact-save" class="form-horizontal" action="' + url_action + '" method="post" enctype="multipart/form-data">';
		html += '		<input type="hidden" id="ccid" name="ccid" value="' + id + '" />';
		html += '		<div class="control-group">';
		html += '			<label class="control-label" for="cct">ชื่อสาขา</label>';
		html += '			<div class="controls">';
		html += '				<input type="text" id="cct" name="cct">';
		html += '			</div>';
		html += '		</div>';						
		html += '		<div class="control-group">';
		html += '			<label class="control-label" for="cca">ที่อยู่</label>';
		html += '			<div class="controls">';					
		html += '				<textarea id="cca" name="cca" rows="3" cols="30"></textarea>';
		html += '			</div>';
		html += '		</div>';						
		html += '		<div class="control-group">';
		html += '			<label class="control-label" for="ccpv">จังหวัด</label>';
		html += '			<div class="controls">';							
		html += '				<select name="ccpv" id="ccpv"></select>';
		html += '			</div>';
		html += '		</div>';					
		html += '		<div class="control-group">';
		html += '			<label class="control-label" for="ccpc">รหัสไปรษณีย์</label>';
		html += '			<div class="controls">';
		html += '				<input type="text" id="ccpc" name="ccpc">';
		html += '			</div>';
		html += '		</div>';					
		html += '		<div class="control-group">';
		html += '			<label class="control-label" for="ccph">โทรศัพท์</label>';
		html += '			<div class="controls">';
		html += '				<input type="text" id="ccph" name="ccph">';
		html += '			</div>';
		html += '		</div>';
		html += '		<div class="control-group">';
		html += '			<label class="control-label" for="ccfx">แฟกซ์</label>';
		html += '			<div class="controls">';
		html += '				<input type="text" id="ccfx" name="ccfx">';
		html += '			</div>';
		html += '		</div>';						
		html += '		<div class="control-group">';
		html += '			<label class="control-label" for="ccem">อีเมล์</label>';
		html += '			<div class="controls">';
		html += '				<input type="text" id="ccem" name="ccem">';
		html += '			</div>';
		html += '		</div>';					
		html += '		<div class="control-group">';
		html += '			<label class="control-label">รูปแผนที่</label>';
		html += '			<div class="controls">';
		html += '			 	<div class="fileupload fileupload-new" data-provides="fileupload">';
		html += '					<div>';
		html += '						<span class="btn btn-file">';
		html += '							<span class="fileupload-new">Select image</span>';
		html += '							<span class="fileupload-exists">Change</span>';
		html += '							<input type="file" name="fm" accept="image/png,image/jpg" />';
		html += '						</span>';
		html += '						<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>';								
		html += '					</div>';
		html += '					<div class="fileupload-preview thumbnail" style="width: 250px; height: 150px;"></div>';					
		html += '				</div>';
		html += '			</div>';
		html += '		</div>';
		html += '	</form>';
		html += '</div>';
		html += '<div class="modal-footer">';
		html += '	<div id="panel-message" style="float:left;"></div>';
		html += '	<button class="btn" data-dismiss="modal" aria-hidden="true">ยกเลิก</button>';
		html += '	<button class="btn btn-primary" id="btn-contact-save">บันทึก</button>';
		html += '</div>';	
		html += '</div>';
		$('body').append(html);

		// get provinces
		$.post('<?php print base_url() . $cafe_name . '/ajax_get_province_list'; ?>', function(output){			
			for (var i=0; i<output.length; i++){
				$('select#ccpv').append('<option value="' + output[i].id + '">' + output[i].name + '</option>');
			}			
		}, 'json');	

		$('#modal-contact').modal('show');
		$('#modal-contact').on('hide', function(){
			$(this).remove();
		});

		// bind submit event
		$('#modal-contact #btn-contact-save').click(function(){
			$('#modal-contact #frm-contact-save').ajaxSubmit({			
				success: function(output){
					output = JSON.parse(output);				
					
					switch (output.result){
						case -1: case -2:{							
							html = '<div class="alert alert-error">' + output.message + '</div>';
							$('#modal-contact #panel-message').html(html);
		
							$('#modal-contact button').attr('disabled','disabled');
							setTimeout(function(){ window.location.href = output.redirect_url }, 1000);	
						}
						break; 
						default:{
							if (output.result)
								html = '<div class="alert alert-success">';						
							else 
								html = '<div class="alert alert-error">';				
							html += output.message + '</div>';					
							$('#modal-contact #panel-message').html(html);
		
							$('#modal-contact button').attr('disabled','disabled');
							setTimeout(function(){ window.location.reload() }, 1000);
						}
						break;
					}
								
				}
			});		
		});
	}
	
	$(document).ready(function(){
		$('.tooltips').tooltip();		

		$('#btn-contact-add').click(function(){
			create_contact_modal('<?php print base_url() . $cafe_name . '/backend/general/contact/ajax_add'?>');			
		});
		$('.btn-contact-edit').click(function(){
			var id = $(this).find('input[name="id"]').val();			
			create_contact_modal('<?php print base_url() . $cafe_name . '/backend/general/contact/ajax_edit'?>', id);

			var modal = $('#modal-contact');
			$.post('<?php print base_url() . $cafe_name . '/backend/general/contact/ajax_load_previous'; ?>', { id : id}, function(output){
				modal.find('#cct').val(output.cct);
				modal.find('#cca').val(output.cca);
				modal.find('#ccpv').val(output.ccpv);
				modal.find('#ccpc').val(output.ccpc);
				modal.find('#ccph').val(output.ccph);
				modal.find('#ccfx').val(output.ccfx);
				modal.find('#ccem').val(output.ccfx);

				$('.fileupload-preview').append('<img class="map-preview" src="' + output.ccm + '">');
			},'json');
		});		
		$('.btn-contact-remove-item').on('click', function(){
			if (confirm('ยืนยันการลบข้อมูล')){
				var id = $(this).find('input[name="id"]').val();
				var me = $(this).parents('tr');
				$.post('<?php print base_url() . $cafe_name . '/backend/general/contact/ajax_remove_item'; ?>', { id : id }, function(output){
					
					switch (output.result){
					    case -2: case -1:{
					    	var html = '<div class="alert alert-error">';
					    	html += output.message + '</div>';
					    	$('.panel-message').html(html);
					    						    	
					    	setTimeout(function(){ window.location.href = output.redirect_url; },2000);
					    }
					    break;
					    default:{
					    	
					    	if (output.result)
								var html = '<div class="alert alert-success">';
							else
								var html = '<div class="alert alert-error">';
							
							html += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
							html += output.message + '</div>';
							$('.panel-message').html(html);

							autoclosealert('.alert', 2000);		
							me.fadeOut(1000);					 	
					    }
					    break;
				    }			
					
				}, 'json');
			}
		});
	});
</script>